/*
 * @Description: 全宗信息面板
 * @Author: Rfan
 * @Date: 2022-02-10 09:30:53
 * @LastEditTime: 2022-07-11 10:03:25
 */

import { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Space } from 'antd';
import classNames from 'classnames/bind';
import type { FC } from 'react';
import { useFondContext } from '../contexts/FondContext';

import styles from '../styles/fondPane.module.scss';

const cx = classNames.bind(styles);

/**
 * @description: 全宗面板组件接受属性类型
 */
export type FondPaneProps = {
  title: string;
  data: any;
};

const FondPane: FC<FondPaneProps> = (props) => {
  console.log('fond pane:', props.data);
  const { title, data } = props;
  const { selectUnit, editFondFunc } = useFondContext();

  const [form] = Form.useForm();

  // 全宗号解锁状态
  const [lockFondNo, setLockFondNo] = useState(false);
  // 同步单位名称
  const [lockFondName, setLockFondName] = useState(false);
  // 保存按钮可用状态
  const [saveBtnState, setSaveBtnState] = useState(false);

  /**
   * @description: 提交表单
   */
  const submitFunc = () => {
    form.submit();
  };

  /**
   * @description: 表单验证通过方法
   * @param {any} values 表单数据
   */
  const onFinish = (values: any) => {
    values.unitId = selectUnit.id;
    values.id = data.id;
    console.log('form finish', values);
    editFondFunc(values).then(() => {
      setSaveBtnState(false);
    });
  };

  /**
   * @description: 表单验证失败方法
   * @param {any} errorInfo 错误信息
   */
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onFormValueChanged = () => {
    setSaveBtnState(true);
  };

  return (
    <div className={cx('fond-pane')}>
      <div className={cx('fond-header')}>
        <div className={cx('title')}>{title} - 配置信息</div>
        <div className={cx('operate')}>
          <Button disabled={!saveBtnState} onClick={submitFunc}>
            保存
          </Button>
        </div>
      </div>
      <div className={cx('container')}>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          preserve={false}
          form={form}
          initialValues={data}
          onValuesChange={() => {
            onFormValueChanged();
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="全宗号"
            extra="全宗的唯一标识，非特殊情况不建议修改（只有admin可修改）"
            required
          >
            <Space>
              <Form.Item
                name="fondCode"
                noStyle
                rules={[{ required: true, message: '请填写全宗号' }]}
              >
                <Input disabled={!lockFondNo} />
              </Form.Item>
              <Button
                type="primary"
                onClick={() => {
                  setLockFondNo((state) => !state);
                }}
              >
                {lockFondNo ? '锁定' : '解锁修改'}
              </Button>
            </Space>
          </Form.Item>
          <Form.Item label="全宗名称" required>
            <Space>
              <Form.Item
                name="fondName"
                noStyle
                rules={[{ required: true, message: '请填写全宗名称' }]}
              >
                <Input disabled={!lockFondName} />
              </Form.Item>
              <Button
                type="primary"
                onClick={() => {
                  setLockFondName((state) => !state);
                }}
              >
                {lockFondName ? '锁定' : '解锁修改'}
              </Button>
            </Space>
          </Form.Item>
          <Form.Item name="remark" label="备注信息">
            <Input.TextArea showCount maxLength={2000} autoSize={{ minRows: 6 }} />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default FondPane;
